<template>
  <!-- 系统管理表单复用 -->
    <div class="system-form">
    <!-- 表单部分 -->
    <!-- <div class="system-form-box">
    <el-form
      v-if="roleManForm"
      v-bind="roleManForm.form"
    >
      <el-form-item
        v-for="(formItem,index) in roleManForm.formItems"
        :key='index'
        v-bind="formItem"
      >
      <component
      :is="`el-${formItem.item.el}`"
      v-model="formItem.prop"
      v-bind="formItem.item"
      >
       </component>
    </el-form-item>
    <div  class="system-form-box-button">
    <el-button @click='addRoleMan'>添加</el-button>
    <el-button>保存修改</el-button>
    </div>

    </el-form>
  </div> -->
    <!-- 搜索框部分 -->
    
   
  <!-- <div  v-if="dataSource" class="search-date-box">
      <span class="dataDemonstration">请选择时间段:</span>
      <el-date-picker
        v-model="dataValue"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="startDate"
        end-placeholder="endDate"
        :shortcuts="shortcuts"
        :default-time="dataValue"
      />

    <el-button type="primary" class="search-date-box-button" @click="bindSearch">搜索</el-button>
    
  </div> -->

      <!-- 表格部分 -->
      <div class="data-table-box">
      <el-table v-if="columns" :data="dataSource" style="width:100%">
        <!-- 表格列 -->
      <el-table-column
        v-for="(column,index) in columns"
        :key="index"
        v-bind="column"
      >
       <!-- 如果当前遍历到的列需要进行复杂的列渲染，在 table-column 的默认插槽位置进行渲染 -->
       <template #default="scope" v-if="column.slot">
            <!-- <span>自定义列渲染</span> -->
            <slot :name="column.prop || column.key" v-bind="scope" />
          </template>

      </el-table-column>

      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
        v-if="pagination"
        background
        layout="total, ->, prev, pager, next"
        :total="1000"
        v-bind="pagination"
      />
    </div>

   
  </template>
  
  <script setup>

import { ref} from 'vue'

  
  // 定义属性
  defineProps({
    dataValue:Array,
    roleManForm:Array|Object,//表单中的角色权限数据
    RoleRight:Array,
    dataSource:Array,
    columns:Array,
    pagination: Boolean | Object, // 分页器配置，如果为 false 则表示不渲染分页器, true 表示渲染默认的分页器, 对象表示分页器组件配置信息--属性
  })

  // 定义可触发事件
  const emit = defineEmits(['search',])
 
  
  // // 搜索按钮可触发事件
  // const  bindSearch=()=>{
  //   const  searchDataValue=dataValue.value
  //   emit('search',searchDataValue)    
  // }
 
  
  </script>
  
  <style lang="less" scoped>
  .search-date-box{
    margin-top:50px;
  }
  .data-table-box{
    margin-top: 50px;
  }
  .system-form-box{
    margin-top: 50px;
    margin:auto;
    width: 600px;
  }
  .search-date-box{
    margin: auto;
    width:600px;
  }

  </style>